'use client'

import { useState } from 'react'
import OutlineButton from '@/components/common/OutlineButton'
import GradientButton from '@/components/common/GradientButton'

export const plans = [
  {
    name: 'Free',
    price: '$0',
    subtitle: '/ month',
    screens: '5 / month',
    features: [
      'Live market, competitor & traction context',
      'Decision-ready summary in minutes',
      'PDF export & report sharing',
      'Bulk uploads (queued)'
    ]
  },
  {
    name: 'Kickstart',
    price: '$199',
    subtitle: '/ seat / month',
    screens: '20 / month',
    features: [
      'Live market, competitor & traction context',
      'Decision-ready summary in minutes',
      'PDF export & report sharing',
      'Bulk uploads (queued)'
    ],
    current: true
  },
  {
    name: 'Growth',
    price: '$499',
    subtitle: '/ seat / month',
    screens: '50 / month',
    features: [
      'Live market, competitor & traction context',
      'Decision-ready summary in minutes',
      'PDF export & report sharing',
      'Bulk uploads (queued)',
      'Email plug-in from inbox (coming soon)'
    ],
    badge: 'Most Popular'
  },
  {
    name: 'Enterprise',
    price: 'Custom',
    subtitle: 'Contact sales',
    screens: 'Unlimited',
    features: [
      'All Growth features',
      'Dedicated account manager',
      'Custom AI screening models',
      'Team analytics dashboard'
    ],
    badge: 'Custom Plan'
  }
]

export default function Plan() {
  const [selected, setSelected] = useState('Kickstart')

  return (
    <div className="upload-card w-full p-[16px] text-gray-200 shadow-[0_0_20px_rgba(0,0,0,0.3)]">
      <h2 className="text-lg font-semibold mb-1 text-white">Choose your plan</h2>
      <p className="text-sm text-gray-400 mb-6">Switch anytime. Prices are per seat unless noted.</p>

      {/* Scrollable container */}
      <div className="w-full overflow-x-auto">
        <div className="py-[8px] px-[8px] flex gap-[12px]">
          {plans.map((plan) => (
            <div
              key={plan.name}
              onClick={() => setSelected(plan.name)}
              className={`flex-shrink-0 w-[280px] rounded-2xl border-solid p-[16px] transition relative
              flex flex-col items-start
              hover:-translate-y-[3px] hover:brightness-110 hover:border-[rgba(124,92,255,0.45)] hover:shadow-[0_0_0_1px_rgba(34,211,238,0.25)]
              ${
                selected === plan.name
                  ? 'border-[#3b82f6] shadow-[0_0_20px_rgba(59,130,246,0.3)]'
                  : 'border-[#1f2533] hover:border-[#2b3142]'
              }
              bg-[#10141f] cursor-pointer`}>
              {/* Badge */}
              {plan.badge && (
                <div className="absolute top-4 right-4 bg-gradient-to-r from-[#38bdf8] to-[#8b5cf6] text-[12px] text-black font-semibold px-3 py-[6px] rounded-full shadow">
                  {plan.badge}
                </div>
              )}

              {/* Title */}
              <h3 className="text-lg font-semibold text-white mb-1">{plan.name}</h3>
              {plan.current && (
                <span className="text-xs bg-[#1f2533] text-gray-300 px-2 py-0.5 rounded-md mb-2 inline-block">
                  Current
                </span>
              )}

              {/* Price */}
              <p className="text-3xl font-bold mt-2 mb-1 text-white">{plan.price}</p>
              <p className="text-sm text-gray-400 mb-2">{plan.subtitle}</p>

              {/* Screens */}
              <p className="text-sm text-gray-300 mb-4">
                Deck Screens: <span className="font-semibold">{plan.screens}</span>
              </p>

              <div className="h-[1px] w-full bg-[#1f2533] mb-[16px]" />

              {/* Features */}
              <ul className="space-y-2 mb-6 text-sm flex-1">
                {plan.features.map((feature, i) => (
                  <li key={i} className="flex items-start gap-2">
                    <span className="text-[#38bdf8] mt-[2px]">✓</span>
                    <span className="text-[#9aa3b2]">{feature}</span>
                  </li>
                ))}
              </ul>

              {/* ✅ Button 固定在底部 */}
              <div className="mt-auto pt-2">
                {plan.current ? (
                  <OutlineButton
                    title="Cancel subscription"
                    fontSize="13px"
                    width="146px"
                    height="36px"
                    radius="12px"
                    onClick={() => {}}
                  />
                ) : (
                  <GradientButton
                    title="Choose Plan"
                    fontSize="13px"
                    width="108px"
                    height="36px"
                    radius="12px"
                    onClick={() => {}}
                  />
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
